<template>
  <div class="user">
    <!-- 1. 合同查看 -->
    <div class="hetong">
      签约合同内容：<el-button type="primary" size="small" @click="look">查看合同</el-button>
    </div>
    <VuePdf ref="myPdf" />

    <!-- 2. 查看发票 -->
    <div class="money">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button @click="download" style="float: right; padding: 3px 0" type="text"
                >下载发票</el-button
              >
            </div>
            <div class="text item">
              <img ref="img" style="width: 400px" :src="imgUrl" alt="" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button @click="downs" style="float: right; padding: 3px 0" type="text"
                >下载不同源发票</el-button
              >
            </div>
            <div class="text item">
              <img ref="myimg" style="width: 400px" src="../../assets/images/11.jpg" alt="" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button @click="down()" style="float: right; padding: 3px 0" type="text"
                >下载本地发票</el-button
              >
            </div>
            <div class="text item">
              <img class="img1" style="width: 400px" :src="imgUrl" alt="" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 3. 导出表格 -->
    <div class="table">
      <div class="header">
        <div class="title">用户信息</div>
        <el-button @click="exportData" size="small">导出表格</el-button>
      </div>
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import VuePdf from './VuePdf.vue'
import img from '../../assets/images/11.jpg'
import { export2Excel } from '../../common/js/util'
export default {
  data() {
    return {
      imgUrl: img,
      columns: [
        // 定义表头
        { title: '日期', key: 'date' },
        { title: '姓名', key: 'name' },
        { title: '地址', key: 'address' }
      ],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  components: {
    VuePdf
  },
  methods: {
    /**
     * 查看合同
     */
    look() {
      this.$refs.myPdf.dialogVisible = true
    },
    /**
     * 下载发票
     */
    download() {
      // 1. 新窗口打开
      let url = this.$refs.img
      window.location.href = url.src
    },
    // 同源才能下载
    down() {
      var alink = document.createElement('a')
      alink.href = this.imgUrl
      console.log(this.imgUrl)
      alink.download = 'pic' 
      alink.click()
    },
    downloadIamge(imgsrc, name) {
      var image = new Image() 
      //  解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        var canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        var context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        var url = canvas.toDataURL('image/png')
        var a = document.createElement('a') 
        var event = new MouseEvent('click') 
        a.download = name || 'photo' 
        a.href = url 
        a.dispatchEvent(event)
      }
      image.src = imgsrc
    },
    downs() {
      this.downloadIamge(this.$refs.myimg.src, 'pic')
    },
 
    exportData() {
      export2Excel(this.columns, this.tableData, '用户列表')
    }
  }
}
</script>

<style lang="less" scoped>
.user {
  margin: 10px;
}
.hetong,
.table {
  padding: 10px;
  border: 1px solid #eee;
  background: #fff;
  color: #666;
}
.money {
  margin: 10px 0;
}
.header {
  display: flex;
  padding: 10px;
  .title {
    flex: 1;
    color: #333;
    font-weight: bold;
  }
}
</style>
